import { defineStore } from 'pinia'
import { ref } from 'vue'
import useAnime from '@/utils/anime'
import { useRoute } from 'vue-router'

export const useMainIndexStore = defineStore('useMainIndexStore', () => {
  const route = useRoute()
  const { fadeIn, fadeOut } = useAnime()

  // dom 元素
  const selector = ref()
  // v-show
  const isShowSelector = ref(false)

  // 显示
  function showSelector() {
    const path = route.path.substring(route.path.lastIndexOf('/') + 1)
    if (path === 'card') {
      if (isShowSelector.value) {
        // 隐藏
        fadeOut(selector.value)
        setTimeout(() => {
          isShowSelector.value = false
        }, 200)
      } else {
        // 显示
        fadeIn(selector.value)
        isShowSelector.value = true
      }
    }
  }

  // contentTitle
  const contentTitle = ref({ msg: '', img: '' })
  function assignTitle(data: { msg: string; img: string }) {
    contentTitle.value = data
  }
  return {
    selector,
    isShowSelector,
    contentTitle,
    showSelector,
    assignTitle
  }
})
